<script setup>
import {RouterView, useRouter} from "vue-router";
import {ref} from "vue";
import {ArrowDownBold, SwitchButton, User} from "@element-plus/icons-vue";

const hoveredItem1 = ref(false)
const hoveredItem2 = ref(false)
const router = useRouter()
const isLogined = ref(false); //默认是为未登录界面
let token = localStorage.getItem('token');
if (token) {
    isLogined.value = true;//token不为空，说明已经登录
}

function toOrderView() {
    router.push({
        path: '/purchaser/order'
    })
}

const sc_height = ref('690px')

//退出登录
const logout = () => {
    localStorage.removeItem('token');
    isLogined.value = false;
    router.push({
        path: '/login'
    })
}

import {useUserInfoStore} from '@/store/user.js'
import {userInfoGetService} from "@/api/user";

const userInfoStore = useUserInfoStore();
//获取个人信息
const getUserInfo = async () => {
    let result = await userInfoGetService();
    //存储pinia
    userInfoStore.info = result.data;
}
if (token) {
    getUserInfo()
}//调用获取信息的方法

window.onresize = function () {
    sc_height.value = (window.innerHeight - 55) + 'px'
}
</script>
<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <el-menu
                        :default-active="activeIndex"
                        class="el-menu-demo"
                        mode="horizontal"
                >
            <span class="el-aside__logo">
              <strong>智链商控</strong>
            </span>
                    <el-menu-item index="1" style="padding: 0;width: 130px;text-align: center">
                        <router-link to="/purchaser/purchaserHome"
                                     style="text-decoration: none;display:block; width: 100%;">
                            首页
                        </router-link>
                    </el-menu-item>
                    <el-menu-item index="2" style="padding: 0;width: 130px;text-align: center">
                        <router-link to="/purchaser/shoppingCart"
                                     style="text-decoration: none;display: block; width: 100%;">购物车
                        </router-link>
                    </el-menu-item>
                    <el-menu-item index="3" @click="toOrderView()">我的订单</el-menu-item>
                    <el-menu-item index="4" style="padding: 0;width: 130px;text-align: center">
                        <router-link to="/purchaser/walletManagement"
                                     style="text-decoration: none;display: block; width: 100%;">
                            财务管理
                        </router-link>
                    </el-menu-item>
                    <el-menu-item index="5" v-if="isLogined===false" style="padding: 0;width: 130px;text-align: center">
                        <router-link to="/login"
                                     style="text-decoration: none;display: block; width: 100%;">
                            登录/注册
                        </router-link>
                    </el-menu-item>
                    <!--                    登录头像-->
                    <el-menu-item index="6" v-else style="width: 130px;">
                        <el-dropdown class="dropbox">
                                <span class="el-dropdown_box">
                                    <el-avatar
                                            :src="userInfoStore.info.pavatar ? userInfoStore.info.pavatar : require('@/assets/defaultAvatar.jpg')"
                                            style="width: 45px; height: 45px; margin-right: 20px"/>
                                    <el-icon>
                                        <ArrowDownBold/>
                                    </el-icon>
                                </span>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <router-link to="/purchaser/basicInfo" style="text-decoration: none">
                                        <el-dropdown-item
                                                :style="{ 'background-color': hoveredItem1 ? 'pink' : '','color':hoveredItem1?'white':'' }"
                                                @mouseenter="hoveredItem1 = true" @mouseleave="hoveredItem1 = false"
                                                command="info">
                                            <el-icon>
                                                <User/>
                                            </el-icon>
                                            <span class="dropbox_font">基本资料</span>
                                        </el-dropdown-item>
                                    </router-link>
                                    <el-dropdown-item command="logout"
                                                      :style="{ 'background-color': hoveredItem2 ? 'pink' : '','color':hoveredItem2?'white':'' }"
                                                      @mouseenter="hoveredItem2 = true"
                                                      @mouseleave="hoveredItem2 = false"
                                                      @click="logout()">
                                        <el-icon>
                                            <SwitchButton/>
                                        </el-icon>
                                        <span class="dropbox_font">退出登录</span>
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </el-menu-item>
                </el-menu>
            </el-header>
            <el-container>
                <el-main style="padding: 0px">
                    <el-scrollbar :height="sc_height">
                        <RouterView></RouterView>
                    </el-scrollbar>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>


<style scoped>
.common-layout {
    height: 100vh;

}

/*//顶部导航栏*/
.el-header {
    height: 26px;
    line-height: 26px;
    background-color: white;

}

/*//标题*/
.el-aside__logo {
    color: #f10180;
    font-size: 17px;
    margin-right: 100px;
    padding-left: 30px;
    line-height: 26px;
    font-family: fantasy, STKaiti;
}

/*//总体菜单栏*/
.el-menu-demo {
    height: 26px;
    width: 100%;
    line-height: 26px;
}

/*.menu-item {*/
/*    margin: 0;*/
/*    padding: 0;*/
/*    display: inline-block;*/
/*    height: 26px;*/
/*    line-height: 26px;*/
/*    width: 80px;*/
/*    margin-top: 0;*/
/*    !*background-color: #cccccc*!*/
/*}*/
/*菜单项*/
.el-menu-item {
    font-size: 9px;
    line-height: 26px;
}

/*//设置选鼠标指针浮动在菜单的设置*/
.el-menu-item:hover {
    background-color: rgba(193, 135, 172, 0.11) !important;
    color: #f10160 !important;
}

/*//设置当前被选中的菜单*/
.el-menu-item.is-active {
    background: #f13b82 !important;
    --el-menu-active-color: pink !important;
}

/*//登录成功的用户头像*/
.dropbox {
    margin-left: 20px;
}

.dropbox:hover {
    border: none;
}

/*头像的下拉框*/
.el-dropdown_box {
    display: flex;
    align-items: center;
    /*z-index: 9999;!*防止被覆盖*!*/
}

/*下拉框字体*/
.dropbox_font {
    font-size: 11px;
}

</style>
